<template>
	<div>
		<el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
			<div class="info"><span>账号ID:</span> {{ globalStore.userInfo.id }}</div>
			<div class="info"><span>登录账号:</span> {{ globalStore.userInfo.username }}</div>
			<div class="info"><span>账号余额:</span> {{ globalStore.userInfo.money }}</div>
			<div class="info">
				<span>手机号:</span> +{{ globalStore.userInfo.area_code }} {{ globalStore.userInfo.mobile }}
				<el-button type="primary" @click="showPhone()">更换手机</el-button>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="showChangePhone" title="更换手机" width="450px" draggable>
			<el-steps :active="step" simple style="margin-bottom: 20px">
				<el-step title="1.验证原手机" description="" />
				<el-step title="2.更换新手机" description="" />
			</el-steps>
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
				<div class="phoneForm" v-if="step == 2">
					<el-form-item prop="area_code" style="flex: 2; margin-right: 5px; margin-bottom: 20px">
						<el-select v-model="loginForm.area_code" class="m-2" placeholder="区号">
							<el-option
								v-for="item in codeList"
								:key="item.area_code"
								:label="'+' + item.area_code + ' ' + item.area_name"
								:value="item.area_code"
							/>
						</el-select>
					</el-form-item>
					<el-form-item prop="username" style="flex: 5; margin-bottom: 20px">
						<el-input :validate-event="false" v-model="loginForm.mobile" placeholder="新手机号码">
							<template #prefix>
								<el-icon class="el-input__icon"><Iphone /></el-icon>
							</template>
						</el-input>
					</el-form-item>
				</div>
				<el-form-item style="margin-bottom: 30px" prop="code">
					<el-input style="flex: 2; margin-right: 10px" :validate-event="false" v-model="loginForm.code" placeholder="验证码">
					</el-input>
					<el-button :disabled="timer" @click="verifyCode()" type="primary"
						>{{ timer ? countDown + "秒后重试" : "发送验证码" }}
					</el-button>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showChangePhone = false">取消</el-button>
					<el-button type="primary" @click="submitPhone()">{{ step == 1 ? "下一步" : "确 认" }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { GlobalStore } from "@/stores";
import { listMobileAreaCode, sendVerifyCodeEdit, updatePhoneCheck, updatePhone } from "@/api/base";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { LOGIN_URL } from "@/config/config";

const router = useRouter();

const globalStore = GlobalStore();
const dialogVisible = ref(false);
const showChangePhone = ref(false);
const step = ref(1);
// openDialog
const openDialog = () => {
	dialogVisible.value = true;
};
defineExpose({ openDialog });
const loginForm: any = ref({ mobile: "", password: "", area_code: 86, code: "" });
const loginRules = reactive({
	// username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	// password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});
//区号列表
const codeList: any = ref([]);
async function getcodeList() {
	let res: any = await listMobileAreaCode();
	return res.data.list;
}
onMounted(() => {
	getcodeList().then(res => {
		codeList.value = res;
	});
});
const showPhone = () => {
	showChangePhone.value = true;
	step.value = 1;
	loginForm.value = { mobile: "", password: "", area_code: 86, code: "" };
};
const timer = ref<Number | null>(null);
const countDown = ref(120);
const verifyCode = () => {
	if (timer.value !== null) return;
	if (step.value == 2 && !loginForm.value.mobile) {
		ElMessage.error("请填写新手机号");
		return;
	}
	sendVerifyCodeEdit({ area_code: loginForm.value.area_code, mobile: loginForm.value.mobile, flag: 4 }).then(() => {
		ElMessage.success("发送短信成功,请注意查收!");
		countDown.value = 119;
		timer.value = window.setInterval(() => {
			countDown.value--;
			if (countDown.value <= 0) {
				if (timer.value) window.clearInterval(timer.value as number);
				countDown.value = 120;
				timer.value = null;
			}
		}, 1000);
	});
};
const submitPhone = () => {
	if (step.value == 1) {
		updatePhoneCheck({
			code: loginForm.value.code
		})
			.then((res: any) => {
				loginForm.value = { mobile: "", password: "", code: "", area_code: 86 };
				step.value = 2;
			})
			.finally(() => {
				if (timer.value) window.clearInterval(timer.value as number);
				countDown.value = 120;
				timer.value = null;
			});
	} else {
		updatePhone({
			new_area_code: loginForm.value.area_code,
			new_mobile: loginForm.value.mobile,
			code: loginForm.value.code
		})
			.then((res: any) => {
				ElMessage.success("修改成功,请重新登录");
				setTimeout(() => {
					// 1.调用退出登录接口
					// await logoutApi();
					// 2.清除 Token
					globalStore.setToken("");
					// 3.重定向到登陆页
					router.replace(LOGIN_URL);
				}, 1000);
			})
			.finally(() => {
				if (timer.value) window.clearInterval(timer.value as number);
				countDown.value = 120;
				timer.value = null;
			});
	}
};
</script>
<style scoped lang="scss">
.login-container {
	height: 100%;
	min-height: 550px;
	background-color: #eeeeee;
	background-image: url("@/assets/images/login_bg.svg");
	background-size: 100% 100%;
	background-size: cover;
	.login-box {
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 96%;
		height: 94%;
		padding: 0 50px;
		background-color: hsl(0deg 0% 100% / 80%);
		border-radius: 10px;
		.dark {
			position: absolute;
			top: 13px;
			right: 18px;
		}
		.login-left {
			width: 800px;
			margin: 0 10px 0 0;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.login-form {
			width: 420px;
			padding: 50px 40px 45px;
			background-color: #ffffff;
			border-radius: 10px;
			box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
			.login-logo {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 45px;
				.login-icon {
					width: 60px;
					height: 52px;
				}
				.logo-text {
					margin: 0;
					font-size: 24px;
					font-weight: bold;
					color: #34495e;
					white-space: nowrap;
				}
			}
			.el-form-item {
				margin-bottom: 40px;
			}
			.login-btn {
				display: flex;
				justify-content: center;
				width: 100%;
				white-space: nowrap;
				.el-button {
					width: 100%;
				}
			}
		}
	}
}
.phoneForm {
	display: flex;
}
.info {
	margin-bottom: 5px;
	color: var(--el-color-primary);
	span {
		display: inline-block;
		width: 80px;
		margin-right: 10px;
		text-align: right;
	}
}
</style>
